/********** 弹性布局 **********

作    者: lijianhui

时    间: 2017-01-01

注    意: 此文件修改需要团队评审

修 改 人: lijianhui

修改时间: 2017-01-01

修改说明: xxx

********** 弹性布局 **********/

/*
行内元素inline-flex
子元素的float、clear和vertical-align属性将失效
*/
// ==================================================================================================== 父
.flex-box{display:flex;}

// 方向
.flex-l{flex-direction:row;}
.flex-r{flex-direction:row-reverse;}
.flex-t{flex-direction:column;}
.flex-b{flex-direction:column-reverse;}

// 换行
.flex-wrap{flex-wrap:nowrap;}
.flex-wrap-lb{flex-wrap:wrap;}
.flex-wrap-lt{flex-wrap:wrap-reverse;}

// flex-flow: flex-direction flex-wrap

// 水平对齐方式
.flex-align-x-l{justify-content:flex-start;}
.flex-align-x-r{justify-content:flex-end;}
.flex-align-x-c{justify-content:center;}
.flex-align-x-sa{justify-content:space-around;}
.flex-align-x-sb{justify-content:space-between;}

// 垂直对齐方式
.flex-align-y-t{align-items:flex-start;}
.flex-align-y-b{align-items:flex-end;}
.flex-align-y-c{align-items:center;}
.flex-align-y-s{align-items:stretch;}
.flex-align-y-b{align-items:baseline;}

// 子集的对齐方式(多轴才有用)
.flex-align-l{justify-content:flex-start;}
.flex-align-r{justify-content:flex-end;}
.flex-align-c{justify-content:center;}
.flex-align-sa{justify-content:space-around;}
.flex-align-sb{justify-content:space-between;}

// ==================================================================================================== 子

// order: i 项目的排列顺序, 数值越小, 排列越靠前, 默认为0

// flex-grow: x 项目放大比例, 默认为0, 剩余空间, 也不放大
// flex-shrink: x 项目缩小比例, 默认为1, 空间不足, 将缩小
// flex-basis: width
// flex: flex-grow flex-shrink flex-basis

// 单独指定垂直对齐方式
.align-self-t{align-self:flex-start;}
.align-self-b{align-self:flex-end;}
.align-self-c{align-self:center;}
.align-self-s{align-self:stretch;}
.align-self-b{align-self:baseline;}

// ==================================================================================================== 组合
.flex-boxs,.flex-l-boxs,.flex-r-boxs,.flex-t-boxs,.flex-b-boxs{.flex-box;
    >*{flex:1;}
}
.flex-boxs,.flex-l-boxs{.flex-l;}
.flex-r-boxs{.flex-r;}
.flex-t-boxs{.flex-t;}
.flex-b-boxs{.flex-b;}